<template>
<div>
  <div>
    <van-nav-bar
        title=""
        left-text="Return"
        left-arrow
        @click-left="tzback()"
    />
  </div>
  <div>
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img class="img1" :src="image" />
      </van-swipe-item>
    </van-swipe>
  </div>
  <div>
    <van-image
        :src="baths.img"
        class="image"
    />
  </div>

  <div>
    <span class="name">{{baths.price}}元</span>
  </div>
  <div>
    <van-rate class="star1" :size="20" v-model="baths.star" allow-half />
    <span class="score">{{baths.star}}</span>
  </div>
  <div>

    <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" @click="yuyue" class="yuyue">
      立即预约
    </van-button>

  </div>
  <div>
    <van-row class="vanrow">
      <van-col span="12">
        <van-icon name="like" size="28px" class="icon1" :color="color1" @click="zan"/>
        <van-icon name="star" size="28px" class="icon2" :color="color2" @click="cang"/>
        <van-icon name="comment" size="28px" class="icon3" @click="comment()"/>
        <van-icon name="share" size="28px" class="icon4" @click=""/>
      </van-col>
      <van-col span="12">
      </van-col>
    </van-row>
    <div>
      <span class="zannum" >{{baths.znum}}</span>
      <span class="cangnum" >{{baths.cnum}}</span>
    </div>
  </div>
  <div>
    <van-icon name="location" class="location" size="28px" @click="getmap"/>
  </div>
  <div>
    <van-cell title="精选评价" is-link  class="title"/>
  </div>
  <div class="div1" v-for="c in contents"
       :src="c.img"
       :username="c.username"
       :time="c.ctime"
       :content="c.content">
    <van-cell-group >
      <van-cell :value="c.content" style="font-size: 18px"/>
      <span></span>
      <div>
        <van-row>
          <van-col span="12"> <van-image
              round
              width="2rem"
              height="2rem"
              :src="c.img"
              class="userimg"
          /></van-col>
          <van-col span="12">
            <span class="username">{{c.username}}</span>
          </van-col>
        </van-row>
        <van-row>
          <span class="time">{{c.ctime}}</span>
        </van-row>
      </div>

    </van-cell-group>
  </div>
</div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: "BathDetail",
  data(){
    return{
        //1 激活(点击过了),0 未激活(未点击过)
        active1:0,
        active2:0,
        color1: "",
        color2:"",
        contents:[],
       storemaps:{
        id:"",
        mid:"",
        longitude:"",
        latitude:""
      },
        baths:{
        },
        attentions:{
        },
        attentions1:{
      },
        images:[
        'https://img.meituan.net/dpmobile/2cc031985609ce10b1c85b792a262436285320.png',
        'https://img2.baidu.com/it/u=484653787,1959969065&fm=253&fmt=auto&app=138&f=JPEG?w=1920&h=500',
      ]
    }
  },
  methods:{
    tzback(){
      this.$router.push({path:"/bath"});
    },
    zan(){
      //如果状态为0,说明没有点过,设置状态为1,颜色发生变化,调用接口,znum+1
      //点过赞后返回页面,再进来,状态是变化的,应该再根据表中的zactive去判断是否点过赞,因为mounted比这个函数先执行
      if (this.baths.zactive===1){
          this.color1="black";
          this.active1=0;
          this.baths.znum--;
          var znum = this.baths.znum;
          console.log(znum)
        var zactive = this.active1;
          var mid=this.$route.query.mid;
          //修改值即可
          this.axios.get("http://localhost:8081/api/zancang/addZnum.do?mid="+mid+"&znum="+znum+"&zactive="+zactive).then(res=>{
            if(res.data.code==200){
              //成功
              this.baths=res.data.data;
            }else{
              //失败
              Toast('亲，网络异常！');
            }
          })
        //取消关注,修改标记为0，表示未关注
        this.axios.get("http://localhost:8081/api/attention/update.do?mid="+mid+"&zactive="+zactive).then(res=>{
          if(res.data.code==200){
            //成功
            this.attentions=res.data.data;
            console.log(this.attentions)
          }else{
            //失败
            Toast('亲，网络异常！');
          }
        })
      }
     else{
          this.active1=1;
          this.color1="red";
          this.baths.znum++;
          var znum = this.baths.znum;
          var zactive = this.active1;
          console.log(znum)
          var mid=this.$route.query.mid;
          this.axios.get("http://localhost:8081/api/zancang/addZnum.do?mid="+mid+"&znum="+znum+"&zactive="+zactive).then(res=>{
            if(res.data.code==200){
              //成功
              this.baths=res.data.data;
            }else{
              //失败
              Toast('亲，网络异常！');
            }
          })
        //关注表,用户,关注后添加到数据库中,如果再次点击,表明取消,取消后只需改变用户的标记位即可,我的关注和页面刷新通过用户的标记
        //判断.
        this.axios.get("http://localhost:8081/api/attention/insert.do?mid="+mid+"&zactive="+zactive).then(res=>{
          if(res.data.code==200){
            //成功
            this.attentions=res.data.data;
            console.log(this.attentions)
          }else{
            //失败
            Toast('亲，网络异常！');
          }
        })
        }
    },
    cang(){
//如果状态为0,说明没有点过,设置状态为1,颜色发生变化,调用接口,cnum+1
      if (this.baths.cactive===0){
        this.active2=1;
        this.color2="yellow";
        this.baths.cnum++;
        var cnum = this.baths.cnum;
        var cactive = this.active2;
        console.log(cnum)
        var mid=this.$route.query.mid;
        this.axios.get("http://localhost:8081/api/zancang/addCnum.do?mid="+mid+"&cnum="+cnum+"&cactive="+cactive).then(res=>{
          if(res.data.code==200){
            //成功
            this.baths=res.data.data;
          }else{
            //失败
            Toast('亲，网络异常！');
          }
        })
        //关注表,用户,关注后添加到数据库中,如果再次点击,表明取消,取消后只需改变用户的标记位即可,我的关注和页面刷新通过用户的标记
        //判断.
        this.axios.get("http://localhost:8081/api/collection/insert.do?mid="+mid+"&cactive="+cactive).then(res=>{
          if(res.data.code==200){
            //成功
            this.attentions1=res.data.data;
            console.log(this.attentions1)
          }else{
            //失败
            Toast('亲，网络异常！');
          }
        })
      }else{
        this.color2="black";
        this.active2=0;
        this.baths.cnum--;
        var cnum = this.baths.cnum;
        console.log(cnum)
        var cactive = this.active2;
        var mid=this.$route.query.mid;
        //修改值即可
        this.axios.get("http://localhost:8081/api/zancang/addCnum.do?mid="+mid+"&cnum="+cnum+"&cactive="+cactive).then(res=>{
          if(res.data.code==200){
            //成功
            this.baths=res.data.data;
          }else{
            //失败
            Toast('亲，网络异常！');
          }
        })
        //取消关注,修改标记为0，表示未关注
        this.axios.get("http://localhost:8081/api/collection/update.do?mid="+mid+"&cactive="+cactive).then(res=>{
          if(res.data.code==200){
            //成功
            this.attentions1=res.data.data;
            console.log(this.attentions1)
          }else{
            //失败
            Toast('亲，网络异常！');
          }
        })
      }
    },
    comment(){
      var mid=this.$route.query.mid;
      this.$router.push({path:"/comment",query:{mid:mid}});
    },
    yuyue(){
      var mid=this.$route.query.mid;
      this.$router.push({path:"/payz",query:{mid:mid}});
    },
    getmap(){
      var mid=this.$route.query.mid;
      this.axios.get("http://localhost:8081/api/storemap/all.do?mid="+mid).then((response) => {
        console.log(response.data)
        this.storemaps=response.data.data[0];
        var longitude=this.storemaps.longitude;
        var latitude=this.storemaps.latitude;
        console.log(this.storemaps)
        this.$router.push({path:"/storemap",query:{mid:mid,longitude:longitude,latitude:latitude}});
      })

    }
  },
  mounted() {
    //页面加载，就会执行

    //axios请求后端接口 查询详情
    //获取store的id
    var id=this.$route.query.mid;
    this.axios.get("http://localhost:8081/api/zancang/detail.do?id="+id).then(res=>{
      if(res.data.code==200){
        //成功
        this.baths=res.data.data;
        console.log(this.baths)
        //用zactive去记录点赞没有,将active1的值赋值给表中即可,然后返回来刷新
      //   if (this.baths.zactive===1){
      //     this.color1="red";
      //   }
      // if (this.baths.cactive===1){
      //   this.color2="yellow";
      // }
      }else{
        //失败
        Toast('亲，网络异常！');
      }
    })
    //从喜欢表中查出对应的用户的active值去显示,等同于另一张表只是记录点赞数与收藏数
      this.axios.get("http://localhost:8081/api/attention/selectFlag.do?mid="+id).then(res=>{
        if(res.data.code==200){
          //成功
          this.attentions=res.data.data;
          console.log(this.attentions)
          //用zactive去记录点赞没有,将active1的值赋值给表中即可,然后返回来刷新
          if (this.attentions.zactive===1){
            this.color1="red";
          }
        }
      })
      this.axios.get("http://localhost:8081/api/collection/selectFlag.do?mid="+id).then(res=>{
        if(res.data.code==200){
          //成功
          this.attentions1=res.data.data;
          console.log(this.attentions1)
          //用cactive去记录点赞没有,将active1的值赋值给表中即可,然后返回来刷新
          if (this.attentions1.cactive===1){
            this.color2="yellow";
          }
        }
      })

    //评论
    this.axios.get("http://localhost:8081/api/content/all.do?mid="+id).then(res=>{
      if(res.data.code==200){
        //成功
        this.contents=res.data.data;
        console.log(this.contents)
      }else{
        //失败
        Toast('亲，网络异常！');
      }
    })

  },
}
</script>

<style scoped>
.img1{
  width: 100%;
  height: 8rem;
}
.image{
  margin-right: 11em;
  width: 200px;
  height: 10rem;
}
.name{
  font-size: 24px;
  margin-right: 10em;
  color: red;
}
.star1{
  margin-right:15rem;
}
.score{
  font-size: 24px;
  color: coral;
  margin-right:15rem;
}
.icon1{
  margin-left: 6px;
  margin-right: 14px;
}
.icon2{
  margin-left: 2px;
  margin-right: 16px;
}
.icon3{
  margin-left: 2px;
  margin-right: 16px;
}
.icon4{
  margin-left: 2px;
  margin-right: 16px;
}
.zannum{
  font-size: 18px;
  margin-right: 1.4em;
}
.cangnum{
  font-size: 18px;
  margin-right: 16em;
}
.title{
  font-size: 18px;
}
.userimg{
  margin-left: 11em;
}
.username{
  vertical-align: middle;
  text-align: center;
}
.time{
  margin-left: 14em;
}
.yuyue{
  margin-right: 17em;
  height: 35px;
}
.vanrow{
  margin-top: 10px;
}
.location{
  margin-right: 12em;
}
</style>